<template>




      <div class="login">
        <h1>登录</h1>
        <div class="demo-login">
          <div class="container">
          <Login @on-submit="handleSubmit" >
            <UserName name="username" style="width: 200px;"/>

            <Password name="password" style="width: 200px;" class="input"/>
            <div class="demo-auto-login">
<!--              <VerificationCode class="code"/>-->
              <Checkbox v-model="autoLogin" size="large" class="checkbox">自动登录</Checkbox>
              <a class="link">忘记密码</a>
            </div>

            <Submit style="width: 200px;"/>
          </Login>
          </div>
        </div>
      </div>

</template>

<script>
import {UserName,Password,Checkbox,Submit,Login} from 'view-ui-plus'
import VerificationCode from "@/components/VerificationCode";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "MyLogin",
  components:{
    UserName,
    Password,
    Checkbox,
    Submit,
    Login,
    // eslint-disable-next-line vue/no-unused-components
    VerificationCode
  },

  data () {
            return {
                autoLogin: true
            }
        },
        methods: {
            handleSubmit (valid, { username, password }) {
                if (valid) {
                    this.$Modal.info({
                        title: '输入的内容如下：',
                        content: 'username: ' + username + ' | password: ' + password
                    });
                }
            }
        }

}
</script>

<style scoped>


.code{
  width: 100px;
  height: 50px;
}

/*style="width: 100px; height: 100px; background-color: #ccc;*/
  .login {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: 9999;

    width: 400px;
    height: 400px;
    background-color: #ffffff;
  /*在盒子周围设置阴影*/

    /*position: relative;*/


  }
  /*  #ffffff*/

.demo-login{
  width: 400px;
  margin: 0 auto !important;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-25%, -50%);

}
.demo-auto-login{
  margin-bottom: 24px;
  text-align: left;
}
.demo-auto-login a{
  float: right;
}

.container {
  display: flex;
  align-items: center;
}

.checkbox {
  margin-right: 10px;
}

.link {
  margin-left: auto;
}

.input {
  width: 200px;
}

h1 {
  text-align: center;
}
</style>
